import React, { useState, useEffect } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const StepsSlider = () => {
  const [values, setValues] = useState([20, 80]);
  const [inputValues, setInputValues] = useState(['20', '80']);

  useEffect(() => {
    console.log('StepsSlider mounted');
  }, []);

  const handleChange = (values) => {
    console.log('Slider changed:', values);
    setValues(values.map(Number));
    setInputValues(values);
  };

  const handleInputChange = (e, handle) => {
    const newValue = e.target.value;
    setInputValues(prev => {
      const newValues = [...prev];
      newValues[handle] = newValue;
      return newValues;
    });
  };

  const handleKeyDown = (e, handle) => {
    const currentValue = Number(values[handle]);
    let newValue;

    switch (e.key) {
      case 'ArrowUp':
        e.preventDefault();
        newValue = currentValue + 10;
        break;
      case 'ArrowDown':
        e.preventDefault();
        newValue = currentValue - 10;
        break;
      case 'Enter':
        e.preventDefault();
        newValue = Number(inputValues[handle]);
        break;
      default:
        return;
    }

    // 确保值在有效范围内
    if (newValue >= 0 && newValue <= 200) {
      setValues(prev => {
        const newValues = [...prev];
        newValues[handle] = newValue;
        return newValues;
      });
    }
  };

  return (
    <div className="steps-slider-container">
      <h2>Use Steps API Example</h2>
      <div className="slider-wrapper">
        <div className="slider-container">
          <NoUiSlider
            start={values}
            connect={true}
            range={{
              'min': 0,
              '10%': [10, 10],
              '50%': [80, 50],
              '80%': 150,
              'max': 200
            }}
            tooltips={[true, true]}
            onChange={handleChange}
            step={10}
            snap={true}
          />
        </div>
        <div className="input-container">
          <div className="input-group">
            <label>滑块 1:</label>
            <input
              type="number"
              value={inputValues[0]}
              onChange={(e) => handleInputChange(e, 0)}
              onKeyDown={(e) => handleKeyDown(e, 0)}
              min="0"
              max="200"
            />
          </div>
          <div className="input-group">
            <label>滑块 2:</label>
            <input
              type="number"
              value={inputValues[1]}
              onChange={(e) => handleInputChange(e, 1)}
              onKeyDown={(e) => handleKeyDown(e, 1)}
              min="0"
              max="200"
            />
          </div>
        </div>
      </div>
      <div className="description">
        <p>这个示例展示了如何使用步骤 API 来控制滑块：</p>
        <ul>
          <li>使用键盘上下箭头键可以精确控制滑块值（步进值为 10）</li>
          <li>可以直接在输入框中输入值，按回车键确认</li>
          <li>滑块范围是非线性的：0-10 步进值为 10，10-80 步进值为 50，80-150 步进值为 70，150-200 步进值为 50</li>
          <li>输入框和滑块是双向绑定的</li>
        </ul>
      </div>
    </div>
  );
};

export default StepsSlider; 